<template>
  <div class="app-container">
    <el-form :model="form" label-width="110px" label-position="right">
      <el-row>
        <el-col :span="12">
          <el-form-item label="问题">
            <el-autocomplete
              v-model="form.questionName"
              style="width: 100%"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label=" 回答md">
            <v-md-editor
              v-model="form.answerMd"
              :disabled-menus="[]"
              height="400px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="edit">{{ loadingText }}</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <router-link :to="`/questionAnswer/index`" style="margin-right: 5px">
              <el-button type="primary">取消</el-button>
            </router-link>
          </el-form-item>

        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import questionAnswer from '@/api/questionAnswer'
import sysInterviewQuestion from '@/api/interviewQuestion'

export default {
  data() {
    return {
      form: {},
      loadingText: '保存',
      disabled: false,
      id: '',
      name: '',
      timeout: null
    }
  },
  created() {
    const id = this.$route.params.id
    if (id) {
      this.form.id = id
      this.loadingText = '编辑'
      this.getDetailById(id)
      this.disabled = true
    } else {
      this.loadingText = '保存'
    }
  },
  methods: {
    getDetailById(id) {
      questionAnswer.getById(id).then(res => {
        this.form = res.data
      })
    },
    edit() {
      questionAnswer.edit(this.form).then(res => {
        this.$message.success(res.message)
        this.$router.push('/questionAnswer/index')
      })
    },
    querySearchAsync(queryString, callback) {
      clearTimeout(this.timeout)
      const results = []
      // eslint-disable-next-line eqeqeq
      if (queryString == '') {
        callback(results)
      } else {
        // 掉接口需要的参数
        // eslint-disable-next-line no-unused-vars
        const find = {
          questionName: queryString// 上面输入框绑定的数据
        }
        sysInterviewQuestion.getAll({ questionName: queryString }).then(res => {
          for (const question of res.data) {
            console.log(question)
            results.push({
              id: question.id,
              value: question.questionName
            })
          }
          console.log(results)
          callback(results)
        })
      }
    },
    handleSelect(item) {
      this.form.questionId = item.id
    }
  }
}
</script>
<style>

</style>
